<template>
  <div>
    <h2>计算属性</h2>
    <!-- 计算属性，必须当做属性来使用，不能当做方法来调用，不能加小括号 -->
    <input type="text" v-model="xing">
    <input type="text" v-model="ming">
    <p>{{fullName}}</p>
    <p>{{fullName}}</p>
    <p>{{fullName}}</p>

    <h2>使用方法</h2>
    <p>{{getName()}}</p>
    <p>{{getName()}}</p>
    <p>{{getName()}}</p>
  </div>
</template>

<script>
export default {
data(){
  return{
    xing:'李',
    ming:'思思'
  }
},
// 计算属性，要写到和data平级的computed中
computed:{
  // 所有的计算属性，都放到这里【计算属性，碧玺返回计算的结果】
  fullName(){
    console.log('计算属性方法执行了~');
    return this.xing+this.ming
  }
},
methods:{
  getName(){
     console.log('方法被调用了~');
    return this.xing+this.ming
  }
}
}
</script>

